import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { memo } from 'react'
import { ossUrl } from '@/utils/config'
import './index.scss'

const User = ({ userInfo, open }) => {
  const goUserInfo = () => {
    Taro.navigateTo({ url: '/pages/userInfo/index' })
  }
  const renderNoUser = () => {
    return (
      <View className='no_user grid mg_0_auto pd_26' onClick={open}>
        <View className='image_wrapper box_border flex_center radius_oval bg_e7e7e7'>
          <Image className='image' src={ossUrl + '/default_user.png'}></Image>
        </View>
        <View>
          <View className='size_32 lh_28 size_500 cor_fff'>点击登录账户</View>
          <View className='size_24 lh_32 mg_t_20 cor_fff'>登录后，系统会保存你的发音数据，为你建立有针对性的用户档案哦。</View>
        </View>
      </View>
    )
  }
  const renderUser = () => {
    return (
      <View className='userinfo grid pd_26 mg_0_auto'>
        <Image className='image radius_oval' src={userInfo.avatar}></Image>
        <View style={{ width: 'auto', overflow: 'hidden' }}>
          <View className='name size_32 lh_28 cor_fff size_500' onClick={goUserInfo}>
            <View className='user_name'>{userInfo.name || 'Sam'}</View>
            <Image src={ossUrl + '/pencil.png'} className='edit'></Image>
          </View>
          <View className='size_24 lh_32 cor_333 mg_t_20 cor_fff'>查看你的发音能力档案</View>
        </View>
      </View>
    )
  }
  return (
    <View className='user width_fill'>
      {userInfo ? renderUser() : renderNoUser()}
    </View>
  )
}
User.defaultProps = {
  open: () => { }
}

export default memo(User)
